<template>
  <div class="model">

  <el-dialog
    :modal="dialogList.modalC"
    :modal-append-to-body="dialogList.MATD"
    :title="modelSetting.tittle"
    :visible.sync="modelSetting.isShow"
    :width="modelSetting.width"
    :close-on-click-modal="dialogList.COCM"
    :show-close="dialogList.showClose"
    :close-on-press-escape="dialogList.COPE"
    :before-close="handleClose"
    center>

    <!--<span>这是一段信息京津冀斤斤计较京津冀斤斤计较</span>-->
    <slot name="modalSlot">
    </slot>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancleModel">取 消</el-button>
      <el-button type="primary" @click="sureModel">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>

const dialog = {
  // 遮罩层
  modalC: true,
  // 遮罩层是否插入至 body 元素上
  MATD: true,
  // 是否可以通过点击 modal 关闭
  COCM: false,
  // 是否显示关闭按钮
  showClose: true,
  // 是否可以通过按下 ESC 关闭 Dialog
  COPE: true
}

export default {
  props: {
    modelSetting: {
      type: Object,
      default: () => ({
        isShow: false,
        tittle: '标题',
        width: '600px'
      })
    }
  },
  data () {
    return {
      dialogList: _.cloneDeep(dialog)
    }
  },
  methods: {
    //
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },

    // 取消按钮
    cancleModel () {
      this.$emit('cancleModel')
    },

    // 确定按钮
    sureModel () {
      // console.log('111')
      this.$emit('sureModel')
    }
  },
  mounted () {
    console.log(this.dialogList)
  }
}
</script>

<style scoped lang="scss">

</style>
